{% extends "xhs/layout.html" %}

{% block title %}小红书数据管理系统 - 仪表盘{% endblock %}

{% block page_title %}仪表盘{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item active" aria-current="page">仪表盘</li>
{% endblock %}

{% block page_actions %}
<a href="/tasks/add" class="btn btn-primary">
    <i class="fas fa-plus me-1"></i> 新建采集任务
</a>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
    .welcome-banner {
        background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    
    .welcome-banner h3 {
        font-weight: 700;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 1;
    }
    
    .welcome-banner p {
        opacity: 0.9;
        max-width: 600px;
        position: relative;
        z-index: 1;
    }
    
    .welcome-banner .btn {
        position: relative;
        z-index: 1;
    }
    
    .welcome-banner .decoration {
        position: absolute;
        right: -50px;
        top: -50px;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        z-index: 0;
    }
    
    .welcome-banner .decoration-2 {
        position: absolute;
        right: 50px;
        bottom: -80px;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        z-index: 0;
    }
    
    .stat-card {
        height: 100%;
    }
    
    .stat-trend {
        display: flex;
        align-items: center;
        margin-top: 0.25rem;
    }
    
    .stat-trend.up {
        color: var(--success-color);
    }
    
    .stat-trend.down {
        color: var(--danger-color);
    }
    
    .note-item {
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        background-color: #fff;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: all 0.3s;
    }
    
    .note-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
    
    .note-item .note-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .note-item .note-meta {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        color: #6c757d;
    }
    
    .note-item .note-stats {
        display: flex;
        margin-top: 0.75rem;
    }
    
    .note-item .note-stat {
        display: flex;
        align-items: center;
        margin-right: 1rem;
        font-size: 0.875rem;
    }
    
    .note-item .note-stat i {
        margin-right: 0.25rem;
        font-size: 0.75rem;
    }
    
    .task-progress {
        height: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .task-progress .progress-bar {
        border-radius: 0.25rem;
    }
</style>
{% endblock %}

{% block content %}
<!-- 欢迎横幅 -->
<div class="welcome-banner mb-4 animate__animated animate__fadeIn">
    <div class="decoration"></div>
    <div class="decoration-2"></div>
    <h3>欢迎使用汇友数据管理系统</h3>
    <p>
        数据中心实时监控小红书笔记、评论、点赞等数据，为您的决策提供数据支持。
        目前系统已收集 <strong>{{ stats.total_notes|default(0) }}</strong> 条笔记和 <strong>{{ stats.total_comments|default(0) }}</strong> 条评论。
    </p>
    <a href="/statistics" class="btn btn-light mt-2">
        <i class="fas fa-chart-line me-1"></i> 查看统计详情
    </a>
</div>

<!-- 数据统计卡片 -->
<div class="row g-3 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card stat-card animate__animated animate__fadeInUp animate__delay-1s">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="stat-title">笔记总数</div>
                        <div class="stat-value">{{ stats.total_notes|default(0) }}</div>
                        <div class="stat-trend up">
                            <i class="fas fa-arrow-up me-1"></i>
                            <span>12.5%</span>
                        </div>
                    </div>
                    <div class="icon-box bg-primary">
                        <i class="fas fa-book-open"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-transparent border-0 py-2">
                <a href="/notes" class="text-primary d-flex justify-content-between align-items-center">
                    <span>查看全部</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="card stat-card animate__animated animate__fadeInUp animate__delay-2s">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="stat-title">评论总数</div>
                        <div class="stat-value">{{ stats.total_comments|default(0) }}</div>
                        <div class="stat-trend up">
                            <i class="fas fa-arrow-up me-1"></i>
                            <span>8.3%</span>
                        </div>
                    </div>
                    <div class="icon-box bg-success">
                        <i class="fas fa-comment-alt"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-transparent border-0 py-2">
                <a href="/notes" class="text-success d-flex justify-content-between align-items-center">
                    <span>查看详情</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="card stat-card animate__animated animate__fadeInUp animate__delay-3s">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="stat-title">用户总数</div>
                        <div class="stat-value">{{ stats.total_users|default(0) }}</div>
                        <div class="stat-trend up">
                            <i class="fas fa-arrow-up me-1"></i>
                            <span>5.7%</span>
                        </div>
                    </div>
                    <div class="icon-box bg-info">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-transparent border-0 py-2">
                <a href="/users" class="text-info d-flex justify-content-between align-items-center">
                    <span>查看用户</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
    
    </div>
</div>

<div class="row">
    <!-- 热门笔记 -->
    <div class="col-lg-8">
        <div class="card mb-4 animate__animated animate__fadeIn">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-fire text-primary me-2"></i> 热门笔记
                </div>
                <a href="/notes" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="card-body">
                {% if popular_notes %}
                <div class="note-list">
                    {% for note in popular_notes %}
                    <div class="note-item">
                        <div class="d-flex justify-content-between">
                            <div class="note-title">
                                <a href="/notes/{{ note.note_id }}" class="text-dark">
                                    {{ note.title|truncate(30) }}
                                </a>
                            </div>
                            <div class="badge bg-{{ 'primary' if loop.index == 1 else ('success' if loop.index == 2 else 'info') }}">
                                TOP {{ loop.index }}
                            </div>
                        </div>
                        <div class="note-meta">
                            <i class="fas fa-user me-1"></i> {{ note.author }}
                        </div>
                        <div class="note-stats">
                            <div class="note-stat">
                                <i class="fas fa-heart text-danger"></i> {{ note.likes|default(0) }}
                            </div>
                            <div class="note-stat">
                                <i class="fas fa-bookmark text-primary"></i> {{ note.collects|default(0) }}
                            </div>
                            <div class="note-stat">
                                <i class="fas fa-comment text-success"></i> {{ note.comments_count|default(0) }}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                    <p class="text-muted">暂无笔记数据</p>
                    <a href="{{ url_for('xhs.add_note') }}" class="btn btn-sm btn-primary mt-2">
                        <i class="fas fa-plus me-1"></i> 添加笔记
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 笔记类型 & 任务状态 -->
    <div class="col-lg-4">
        <!-- 笔记类型 -->
        <div class="card mb-4 animate__animated animate__fadeIn">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-tags text-primary me-2"></i> 笔记类型
                </div>
                <a href="/note-types" class="btn btn-sm btn-outline-primary">更多</a>
            </div>
            <div class="card-body p-0">
                {% if note_types %}
                <div class="list-group list-group-flush">
                    {% for type in note_types %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-hashtag text-primary me-2"></i>
                            {{ type.keyword }}
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="badge bg-primary rounded-pill me-2">{{ type.count }}</span>
                            <a href="/notes?keyword={{ type.keyword }}" class="btn btn-sm btn-outline-primary btn-icon">
                                <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-4">
                    <p class="text-muted">暂无笔记类型数据</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- 最近任务 -->
        <div class="card mb-4 animate__animated animate__fadeIn">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-tasks text-primary me-2"></i> 最近任务
                </div>
                <a href="/tasks" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="card-body p-0">
                {% if recent_tasks %}
                <div class="list-group list-group-flush">
                    {% for task in recent_tasks %}
                    <div class="list-group-item">
                        <!-- <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <a href="/tasks/{{ task.id }}" class="text-dark fw-500">{{ task.name }}</a>
                            </div>
                            <div>
                                <span class="badge bg-{{ 'success' if task.status == 'completed' else ('warning' if task.status == 'running' else 'danger') }}">
                                    {{ task.status }}
                                </span>
                            </div>
                        </div> -->
                        <div class="progress task-progress">
                            <div class="progress-bar bg-{{ 'success' if task.status == 'completed' else ('warning' if task.status == 'running' else 'danger') }}" 
                                role="progressbar" 
                                style="width: {{ task.progress|default(0) }}%" 
                                aria-valuenow="{{ task.progress|default(0) }}" 
                                aria-valuemin="0" 
                                aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-4">
                    <p class="text-muted">暂无任务数据</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 数据概览图表 -->
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4 animate__animated animate__fadeIn">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-chart-bar text-primary me-2"></i> 数据概览
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-primary active" id="chart-view-week">本周</button>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="chart-view-month">本月</button>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="chart-view-year">本年</button>
                </div>
            </div>
            <div class="card-body">
                <div id="data-overview-chart" style="height: 350px;"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 数据概览图表
        var overviewChart = echarts.init(document.getElementById('data-overview-chart'));
        
        // 生成模拟日期数据（过去7天）
        var dates = [];
        var today = new Date();
        for (var i = 6; i >= 0; i--) {
            var d = new Date(today);
            d.setDate(today.getDate() - i);
            dates.push(d.getMonth() + 1 + '/' + d.getDate());
        }
        
        // 模拟数据
        var notesData = [{{ stats.total_notes|default(0) * 0.2 }}, {{ stats.total_notes|default(0) * 0.3 }}, 
                          {{ stats.total_notes|default(0) * 0.4 }}, {{ stats.total_notes|default(0) * 0.5 }},
                          {{ stats.total_notes|default(0) * 0.7 }}, {{ stats.total_notes|default(0) * 0.9 }},
                          {{ stats.total_notes|default(0) }}];
        
        var commentsData = [{{ stats.total_comments|default(0) * 0.3 }}, {{ stats.total_comments|default(0) * 0.4 }},
                             {{ stats.total_comments|default(0) * 0.5 }}, {{ stats.total_comments|default(0) * 0.6 }},
                             {{ stats.total_comments|default(0) * 0.7 }}, {{ stats.total_comments|default(0) * 0.8 }},
                             {{ stats.total_comments|default(0) }}];
        
        var usersData = [{{ stats.total_users|default(0) * 0.6 }}, {{ stats.total_users|default(0) * 0.65 }},
                          {{ stats.total_users|default(0) * 0.7 }}, {{ stats.total_users|default(0) * 0.8 }},
                          {{ stats.total_users|default(0) * 0.85 }}, {{ stats.total_users|default(0) * 0.95 }},
                          {{ stats.total_users|default(0) }}];
        
        // 图表配置
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['笔记数量', '评论数量', '用户数量'],
                right: '5%',
                top: '3%'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: dates,
                    axisLine: {
                        lineStyle: {
                            color: '#ced4da'
                        }
                    },
                    axisLabel: {
                        color: '#6c757d'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '数量',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ced4da'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0,0,0,0.05)'
                        }
                    },
                    axisLabel: {
                        color: '#6c757d',
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '笔记数量',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#FF4F5E'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(255, 79, 94, 0.5)'
                        }, {
                            offset: 1,
                            color: 'rgba(255, 79, 94, 0.1)'
                        }])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: notesData
                },
                {
                    name: '评论数量',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#2DCE89'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(45, 206, 137, 0.5)'
                        }, {
                            offset: 1,
                            color: 'rgba(45, 206, 137, 0.1)'
                        }])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: commentsData
                },
                {
                    name: '用户数量',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#6A7BFF'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(106, 123, 255, 0.5)'
                        }, {
                            offset: 1,
                            color: 'rgba(106, 123, 255, 0.1)'
                        }])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: usersData
                }
            ]
        };
        
        // 应用图表配置
        overviewChart.setOption(option);
        
        // 图表视图切换
        document.getElementById('chart-view-week').addEventListener('click', function() {
            this.classList.add('active');
            document.getElementById('chart-view-month').classList.remove('active');
            document.getElementById('chart-view-year').classList.remove('active');
            
            option.xAxis[0].data = dates;
            option.series[0].data = notesData;
            option.series[1].data = commentsData;
            option.series[2].data = usersData;
            overviewChart.setOption(option);
        });
        
        document.getElementById('chart-view-month').addEventListener('click', function() {
            this.classList.add('active');
            document.getElementById('chart-view-week').classList.remove('active');
            document.getElementById('chart-view-year').classList.remove('active');
            
            // 生成模拟月数据（过去30天）
            var monthDates = [];
            var monthNotesData = [];
            var monthCommentsData = [];
            var monthUsersData = [];
            
            for (var i = 0; i < 30; i += 2) {
                var d = new Date(today);
                d.setDate(today.getDate() - (29 - i));
                monthDates.push(d.getMonth() + 1 + '/' + d.getDate());
                
                monthNotesData.push(Math.round({{ stats.total_notes|default(0) }} * (0.3 + i / 30)));
                monthCommentsData.push(Math.round({{ stats.total_comments|default(0) }} * (0.4 + i / 30)));
                monthUsersData.push(Math.round({{ stats.total_users|default(0) }} * (0.5 + i / 30)));
            }
            
            option.xAxis[0].data = monthDates;
            option.series[0].data = monthNotesData;
            option.series[1].data = monthCommentsData;
            option.series[2].data = monthUsersData;
            overviewChart.setOption(option);
        });
        
        document.getElementById('chart-view-year').addEventListener('click', function() {
            this.classList.add('active');
            document.getElementById('chart-view-week').classList.remove('active');
            document.getElementById('chart-view-month').classList.remove('active');
            
            // 生成模拟年数据（过去12个月）
            var yearDates = [];
            var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            var yearNotesData = [];
            var yearCommentsData = [];
            var yearUsersData = [];
            
            var currentMonth = today.getMonth();
            for (var i = 0; i < 12; i++) {
                var monthIndex = (currentMonth - 11 + i) % 12;
                if (monthIndex < 0) monthIndex += 12;
                yearDates.push(monthNames[monthIndex]);
                
                yearNotesData.push(Math.round({{ stats.total_notes|default(0) }} * (0.1 + i / 12)));
                yearCommentsData.push(Math.round({{ stats.total_comments|default(0) }} * (0.2 + i / 12)));
                yearUsersData.push(Math.round({{ stats.total_users|default(0) }} * (0.3 + i / 12)));
            }
            
            option.xAxis[0].data = yearDates;
            option.series[0].data = yearNotesData;
            option.series[1].data = yearCommentsData;
            option.series[2].data = yearUsersData;
            overviewChart.setOption(option);
        });
        
        // 窗口大小变化时自动调整图表大小
        window.addEventListener('resize', function() {
            overviewChart.resize();
        });
    });
</script>
{% endblock %} 